<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/17 0017
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page import= "com.model.Admin" %>
<%@ page import="com.model.DormManager" %>
<%@ page import="com.model.Student" %>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生宿舍管理系统登录</title>
    <link href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/resources/js/jquery.js"></script>
    <script type="text/javascript">
        /*函数功能：表单提交错误时摇晃动画*/
        function shakeform(){
            $(".form-signin").removeClass('shake_effect');
            setTimeout(function()
            {
                $(".form-signin").addClass('shake_effect')
            },1);
        }
        function checkForm(){
            var userName=document.getElementById("userName").value;
            var password=document.getElementById("password").value;
            var rPassword=document.getElementById("rPassword").value;
            var dormBuildId=document.getElementById("dormBuildId").value;
            var dormName=document.getElementById("dormName").value;
            var name=document.getElementById("name").value;
            var sex=document.getElementById("sex").value;
            var tel=document.getElementById("tel").value;
            if(userName==""||password==""||rPassword==""||name==""||sex==""||tel==""||dormBuildId==""||dormName==""){
                document.getElementById("error").innerHTML="信息填写不完整！";
                return false;
            } else if(password!=rPassword){
                document.getElementById("error").innerHTML="密码填写不一致！";
                return false;
            }else {
                var reg= /^1[3|4|5|7|8][0-9]{9}$/;
                if(!reg.test(tel)){
                    document.getElementById("error").innerHTML="请输入正确的手机号";
                    return false;
                }
                return true;
            }
        }
        if ("用户名或密码错误！"=="${error}"){
            shakeform();
        }

        $(document).ready(function(){
            $("ul li:eq(2)").addClass("active");
        });
    </script>

    <style type="text/css">
        body {
            padding-top: 200px;
            padding-bottom: 40px;
            background-image: url('resources/images/bg.jpeg');
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .radio {
            padding-top: 10px;
            padding-bottom:10px;
        }

        .form-signin-heading{
            text-align: center;
        }

        .form-signin {
            max-width: 300px;
            padding: 19px 29px 0px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
        }
        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }
        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }
        .btn{
            margin-bottom: 10px;
        }
        .shake_effect{
            -webkit-animation-name: shake;
            animation-name: shake;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        @-webkit-keyframes shake {
            from, to {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
            }
        }

        @keyframes shake {
            from, to {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
            }

        }
    </style>

</head>
<body>
<div class="container">
    <div class="data_list">
        <form action="register?action=allSave" method="post" onsubmit="return checkForm()" accept-charset="UTF-8">
            <h2 class="form-signin-heading" style="color:gray;">宿舍管理系统</h2>
            <div class="data_form" >
                <input type="hidden" id="studentId" name="studentId" value="${student.studentId }"/>
                <table align="center">
                    <tr>
                        <td><font color="red">*</font>学号：</td>
                        <td><input type="text" id="userName"  name="userName" value="${student.userName }"  style="margin-top:5px;height:30px;" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>密码：</td>
                        <td><input type="password" id="password"  name="password" value="${student.password }"  style="margin-top:5px;height:30px;" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>确认密码：</td>
                        <td><input type="password" id="rPassword"  name="rPassword" value="${student.password }"  style="margin-top:5px;height:30px;" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>姓名：</td>
                        <td><input type="text" id="name"  name="name" value="${student.name }"  style="margin-top:5px;height:30px;" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>性别：</td>
                        <td>
                            <select id="sex" name="sex" style="width: 90px;">
                                <option value="">请选择...</option>
                                <option value="男" ${student.sex eq "男"?'selected':'' }>男</option>
                                <option value="女" ${student.sex eq "女"?'selected':'' }>女</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>宿舍楼：</td>
                        <td>
                            <select id="dormBuildId" name="dormBuildId" style="width: 90px;">
                                <option value=1 ${student.dormBuildId==1?'selected':'' }>一栋</option>
                                <option value="2" ${student.dormBuildId==2?'selected':'' }>二栋</option>
                                <option value="3" ${student.dormBuildId==3?'selected':'' }>三栋</option>
                                <option value="4" ${student.dormBuildId==4?'selected':'' }>四栋</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>寝室：</td>
                        <td><input type="text" id="dormName"  name="dormName" value="${student.dormName }"  style="margin-top:5px;height:30px;" /></td>
                    </tr>
                    <tr>
                        <td><font color="red">*</font>联系电话：</td>
                        <td><input type="text" id="tel"  name="tel" value="${student.tel }"  style="margin-top:5px;height:30px;" /></td>
                    </tr>
                </table>
                <div align="center">
                    <input type="submit" class="btn btn-primary" value="注册"/>
                    &nbsp;<button class="btn btn-primary" type="button" onclick="javascript:window.location='/'">返回</button>
                </div>
                <div align="center">
                    <font id="error" color="red">${error }</font>
                </div>
            </div>
        </form>
    </div>
</div>
